<template>
	<div class="textTool">
		<el-tabs v-model="activeName">
			<el-tab-pane label="英文大小写转换" name="EnglishText">
				<div class="tb1">
					<div>
						<el-button type="primary" @click="upperCase" size="mini">转换成大写</el-button>
						<el-button type="primary" @click="lowerCase" size="mini">转换成小写</el-button>
					</div>
					<div>
						<el-button type="primary" @click="wordUpper" size="mini">单词首字母大写</el-button>
						<el-button type="primary" @click="sentenceUpper" size="mini">句子首字母大写</el-button>
					</div>
					<div>
						<el-button type="primary" @click="reversal" size="mini">大小写反转</el-button>
					</div>
				</div>
				<div class="tb2">
					<el-input type="textarea" v-model="val" :rows="11" placeholder="请把你需要转换的内容粘贴在这里"></el-input>
					<el-input type="textarea" v-model="result" :rows="11" placeholder="转换后的结果"></el-input>
				</div>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				activeName: 'EnglishText',
				val: '',
				result: '',
			}
		},
		computed:{
			
		},
		methods: {
			upperCase(){
				this.result = this.val.toUpperCase();
			},
			lowerCase(){
				this.result = this.val.toLowerCase();
			},
			wordUpper(){
				let result = this.val.toLowerCase();
				this.result = result.replace(/\b\w/g, function(char) {
				    return char.toUpperCase();
				});
			},
			sentenceUpper(){
				let result = this.val.toLowerCase();
				this.result = result.replace(/(^|\.\s+)(\w)/g, function(match, p1, p2) {
					return p1 + p2.toUpperCase();
				});
			},
			reversal(){
				var reversedText = "";
				for (var i = 0; i < this.val.length; i++) {
					var char = this.val[i];
					if (char === char.toUpperCase()) {
						reversedText += char.toLowerCase();
					} else {
						reversedText += char.toUpperCase();
					}
				}
				this.result = reversedText;
			},
		},
		mounted(){
			
		},
		destroyed() {
			
		},
	}
</script>

<style scoped>
	.textTool {
		position: relative;
		width: 100%;
		text-align: left;
	}
	
	.textTool .tb1{
		display: table;
	}
	
	.textTool .tb2{
		display: table;
		width: 100%;
		margin-top: 14px;
	}
	.textTool .tb2 div{
		display: table-cell;
		width: 50%;
	}
	.textTool .tb2 div:nth-of-type(1){
		padding-right: 7px;
	}
	.textTool .tb2 div:nth-of-type(2){
		padding-left: 7px;
	}
	.textTool .tb3 .tip{
		font-size: 15px;
	}
	
	@media screen and (min-width: 1200px){
		.textTool .tb1>div{
			display: table-cell;
			padding: 0 0 0 10px;
		}
		.textTool .tb1>div:first-of-type{
			padding-left:0px;
		}
	}
	@media screen and (max-width: 1200px){
		.textTool .tb1>div{
			display: table-cell;
			padding: 0 0 0 10px;
		}
		.textTool .tb1>div:first-of-type{
			padding-left:0px;
		}
	}
	@media screen and (max-width: 767px){
		.textTool .tb1>div{
			display: block;
			padding: 0 0 10px 0;
		}
		.textTool .tb1>div:last-of-type{
			padding-bottom:0px;
		}
		.textTool .tb2{
			margin-top: 10px;
		}
	}
</style>